import React, { Component } from 'react'

export default class App extends Component {
    state = {
        note: '',
        str: '',
        option: [
            { val: 'pg', label: '苹果' },
            { val: 'mg', label: '芒果' },
            { val: 'lz', label: '荔枝' }
        ],
        sex: '',
        hobby: []
    }

    changeValue(e) {
        this.setState({
            [e.target.name]: e.target.value
        })
    }

    changeHobby(e) {
        // console.log(e.target.value,e.target.checked);

        const arr = [...this.state.hobby]

        if (e.target.checked) {
            // 该项已经被选中,应该被加在数组中
            arr.push(e.target.value)
        } else {
            //该项已经被取消选中了
            //根据匹配到的内容找到索引值
            const index = this.state.hobby.findIndex(item => e.target.value === item)
             
            arr.splice(index, 1)
        }

        this.setState({
            hobby: arr
        })

    }

    render() {
        return (
            <div>
                <h3>{this.state.note}</h3>
                <textarea value={this.state.note} onChange={(e) => { this.changeValue(e) }} name="note" id="" cols="30" rows="10"></textarea>
                <br />
                --------------{this.state.str}

                <select name="str" id="" value={this.state.str} onChange={(e) => { this.changeValue(e) }}>
                    <option value="a">刀削面</option>
                    <option value="b">炸酱面</option>
                    <option value="c">热干面</option>
                    <option value="d">青椒肉丝</option>
                    <option value="e">黄焖鸡米饭</option>
                    <option value="f">酸辣鸡杂</option>
                </select>
                <br />
                --------------{this.state.str}


                <select name="str" id="" value={this.state.str} onChange={(e) => { this.changeValue(e) }}>
                    {this.state.option && this.state.option.map(item => (<option key={item.val}>{item.label}</option>))}
                </select>

                <br />

                <input type="radio" name="sex" id="" value='男' onChange={(e) => { this.changeValue(e) }} />男
                <input type="radio" name="sex" id="" value='女' onChange={(e) => { this.changeValue(e) }} />女

                -----------你选中的是:{this.state.sex}

                <br />

                <input type="checkbox" name="hobby" id="" value='睡觉' onChange={(e) => { this.changeHobby(e) }} />睡觉
                <input type="checkbox" name="hobby" id="" value='洗衣服' onChange={(e) => { this.changeHobby(e) }} />洗衣服
                <input type="checkbox" name="hobby" id="" value='做饭' onChange={(e) => { this.changeHobby(e) }} />做饭
                <input type="checkbox" name="hobby" id="" value='看书' onChange={(e) => { this.changeHobby(e) }} />看书
                <input type="checkbox" name="hobby" id="" value='敲代码' onChange={(e) => { this.changeHobby(e) }} />敲代码
                <input type="checkbox" name="hobby" id="" value='看风景' onChange={(e) => { this.changeHobby(e) }} />看风景
                <br />
                ------------你周末要做什么:{this.state.hobby}
            </div>
        )
    }
}
